import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    ListView,
} from 'react-native';

/**
 * Listview
 * FlatList
 * SectionList
 */
const ITEM_HEIGHT = 100;
// list
export default class PageListView extends Component {

    // 初始化模拟数据
    // 其中提供给数据源的rowHasChanged函数可以告诉ListView它是否需要重绘一行数据，
    // 即数据是否发生了改变，即在需要重绘界面的时候会进行判断，如果之前页面中的改行数据没有发生变化，则不再进行重绘，否则进行重绘。
    constructor(props) {
        super(props);
        const datas = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            mData: datas.cloneWithRows(this._genRows()),
        };
    }

    // 生成数据
    _genRows(){
        const dataBlob = [];
        for(let i = 0 ; i< 100 ; i ++ ){
            dataBlob.push(
                {
                    dm: i + "",
                    mc: i + "" + i,
                });
        }
        return dataBlob;
    }

    // 在ListView的renderRow属性中调用_renderRow一定要绑定this，否则onPress中的this就会指向错误
    render() {
        return (
            <View style={{flex: 1}}>
                <ListView
                    dataSource={this.state.mData}
                    // renderRow={this._renderRow.bind(this)}
                    renderRow={this._renderItem.bind(this)}
                />
            </View>
        );
    }

    // 传入每行数据源，渲染每一行
    _renderItem = (rowData, sectionID, rowID) => {
        let txt = '第' + rowID + '个' + ' title=' + rowData.dm;
        let bgColor = rowID % 2 === 0 ? 'red' : 'blue';
        return <Text onPress={()=>this._pressRow(rowID)} style={[{flex: 1, height: ITEM_HEIGHT, backgroundColor: bgColor}, styles.txt]}>{txt}</Text>
    };

    // 点击所调用的事件
    _pressRow(rowID){
        alert("hello " + rowID + "!");
    }
}

const styles = StyleSheet.create({
    txt: {
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'white',
        fontSize: 30,
    }
});